import React, { useState } from 'react'
import { Form, Input } from 'antd-mobile'
import axios from 'axios'

export default function Xiugai() {
    let [phone,setphone] = useState("")
    let [password,setpassword] = useState("")
    let [yzm,setyzm] = useState("")
    let [sms,setSms] = useState("")
    let ti = ()=>{
      if(sms==yzm){
        axios.post("http://localhost:3000/users/update",{password:password,phone:phone}).then((res)=>{
          if(res.data.code==200){
            alert("修改成功")
          }else{
            alert("修改失败")
          }
      })
      }else{
        alert("验证码错误")
      }
    }
  return (
    <div>
        <h1 style={{textAlign:'center'}}>修改页面</h1>
        <input type="text" placeholder="请输入手机号" style={{width:"100%",height:"40px"}} value={phone} onChange={(e)=>{
            setphone(e.target.value)
        }}></input><br/>
        <Form layout='horizontal' mode='card'>
        <Form.Item label='短信验证码' extra={<button onClick={()=>{
            axios.post("http://localhost:3000/users/get_sms",{
                phone:phone
            }).then((res)=>{
                alert("发送成功")
                setSms(res.data.sms)
                console.log(res.data.sms)
            })

        }}>发送验证码</button>}>
          <Input placeholder='请输入' value={yzm} onChange={(e)=>{
            setyzm(e)
          }
          }/>
        </Form.Item>
      </Form>
        <input type="text" placeholder="请输入新修改密码" style={{width:"100%",height:"40px"}} value={password} onChange={(e)=>{
            setpassword(e.target.value)
        }}></input><br/>
        <button style={{width:"100%",height:"40px",marginBottom:"20px"}} onClick={()=>{
            ti()
        }}>提交</button>
    </div>
  )
}
